<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Extension Options</title>
  <meta charset="UTF-8" />
  <script src="jquery.min.js"></script>
  <link href="dist/bootstrap/bootstrap.min.css" rel="stylesheet" />
  <script src="dist/bootstrap/bootstrap.min.js"></script>
  <link href="dist/glyphicon/glyphicon.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="css/options.css" />
</head>
<body>
  <div id="message"></div>
  <h2>MaxBlock Settings</h2>
  <div class="row g-3">
    <label class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
      Input example: *.example.com/*
    </div>
  </div>
  <div class="row g-3">
    <label for="new_domain" class="col-sm-2 col-form-label">New Domain Filter</label>
    <div class="col-sm-8">
      <input class="form-control" id="new_domain" value="" />
    </div><button class="btn btn-primary col-sm-2" id="add_btn">Add</button>
  </div>
  <div class="row g-3">
    <label class="col-sm-2 col-form-label">Block Domain List</label>
    <div class="col-sm-10">
      <table class="table table-striped table-condensed">
        <thead>
          <tr>
            <th>
              <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </th>
            <!--th>#</th-->
            <th class="domain">Domain Filter</th>
          </tr>
        </thead>
        <tbody id="block_domain_list">
        </tbody>
      </table>
      <button class="btn btn-primary" id="clear_all_btn">Clear All</button>
    </div>
  </div>
  <div class="row g-3">
    <div class="col-12">
      <button class="btn btn-primary" id="save_btn">Save</button>
    </div>
  </div>
  <script src="options.js"></script>
</body>
</html>
